<template>
  <div class="user-media">
    <el-form
      ref="settingForm"
      class="setting-form"
      :rules="formDataRules"
      :model="formData"
      label-position="left"
      label-width="160px"
    >
      <el-form-item label="文件存储方式" prop="storage">
        <el-select v-model="formData.storage" placeholder="请选择" @change="selectStorageChange">
          <el-option label="本地服务器" value="default"></el-option>
          <el-option label="七牛云存储" value="qn"></el-option>
          <el-option label="阿里云OSS" value="al"></el-option>
          <el-option label="腾讯云存储" value="tx"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用户素材库大小" prop="default_size">
        <el-input v-model.number="formData.default_size" placeholder="用户素材库大小(单位：M)" />
      </el-form-item>
      <el-form-item label="红包视频时长限制" prop="duration">
        <el-input v-model.number="formData.duration" placeholder="红包视频时长限制(单位：秒)" />
      </el-form-item>
      <el-form-item label="审核素材" prop="is_check">
        <el-switch
          v-model="formData.is_check"
          active-color="#13ce66"
        />
      </el-form-item>
      <el-form-item label="视频转码" prop="transcoding">
        <el-switch
          v-model="formData.transcoding"
          active-color="#13ce66"
        />
      </el-form-item>
      <el-button type="primary" size="small" @click="submit">确认配置</el-button>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'UserMedia',
  props: {
    setting: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {
        storage: 'default', // 文件存储方式
        default_size: 1024, // 用户素材库默认大小
        is_check: true, // 上传素材库是否审核
        duration: 30, // 视频时长限制
        transcoding: false // 视频素材是否转码
      },
      formDataRules: {
        default_size: [
          { required: true, message: '素材库大小不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入正确的素材库大小', trigger: 'blur' }
        ],
        duration: [
          { required: true, message: '视频时长限制不能为空', trigger: 'blur' },
          { type: 'number', message: '请输入正确的时长', trigger: 'blur' },
          { type: 'number', min: 2, message: '时长不能小于2秒', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    setting() {
      const { storage, default_size, is_check, duration, transcoding } = this.setting
      this.formData = {
        storage,
        default_size,
        is_check: !!is_check,
        duration,
        transcoding: !!transcoding
      }
    }
  },
  methods: {
    /**
     * 提交
     */
    submit() {
      this.$refs.settingForm.validate((valid) => {
        if (valid) {
          const {
            storage,
            default_size,
            is_check,
            duration,
            transcoding
          } = this.formData
          this.$put('setting/media', {
            storage,
            default_size,
            is_check: is_check ? 1 : 0,
            duration,
            transcoding: transcoding ? 1 : 0
          })
            .then(() => {
              this.$message.success({
                message: '修改成功',
                type: 'success'
              })
            })
            .catch((error) => {
              this.$handleError(error)
            })
        }
      })
    },
    /**
     * 切换文件存储方式
     */
    selectStorageChange(value) {
      if (value !== 'default') {
        this.$get('setting/testingAttachment/' + value)
          .catch(() => {
            this.formData.storage = 'default'
            this.$message({
              message: '远程附件测试失败，请确保对应的云存储产品参数正确',
              type: 'error'
            })
          })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .setting-form{
    width: 600px;
  }
</style>
